<template>
    <div id="ss" ref="reference" :class="{fixe:dex}">
        <div id="tabs">
            <div id="ta_d1" class="zz"><div class="ss" @click='chuanzhi(1)'>点餐</div></div>
            <div id="ta_d2"><div class="ss"  @click='chuanzhi(2)'>评价</div ></div>
            <div id="ta_d3"><div class="ss"  @click='chuanzhi(3)'>商家</div></div>
        </div>
    </div>    
</template>
<script>
export default {

   data(){
       return{
           scr:0,
           dex:false

       }
   },
    methods:{
        chuanzhi(val){
            this.$emit('cc',val)
        },
        handlescroll(){
             var scrolltop = window.pageYOffset || document.documentElement.scrollTop||document.body.scrollTop
            if(scrolltop>=this.scr+194){
                this.dex=true
                // console.log(scrolltop)
            }else{
                this.dex=false
            }
        }
    },
    mounted() {
        this.scr= this.$refs.reference.offsetTop
         window.addEventListener('scroll',this.handlescroll)
        console.log(this.scr)
    },
    destroyed() {
            window.removeEventListener('scroll',this.handlescroll)
        },

}
</script>
<style lang="stylus" scoped>
#ss
    width 100%
.fixe
    position fixed
    z-index 999
    top 0
    left 0
    right 0
#tabs
    display flex
    line-height 10.666667vw
    background-color #fff
    border-bottom 1px solid #ebebeb
    width 100%
    #ta_d1
        flex 1
        text-align center
        font-size .373333rem
        color #666
        border-bottom 1px solid #ddd
    .zz
        color #333
        font-weight 700
        .ss
            &:after
                content: "";
                position: absolute;
                bottom: -.32rem;
                bottom: -3.2vw;
                left: 0;
                right: 0;
                height: .053333rem;
                height: .533333vw;
                background-color: #2395ff;
        
    #ta_d2
        flex 1
        text-align center
        font-size .373333rem
        color #666
        border-bottom 1px solid #ddd
    #ta_d3
        flex 1
        text-align center
        font-size .373333rem
        color #666
        border-bottom 1px solid #ddd
</style>


